import React from 'react';
import {View, Text, TouchableOpacity, StyleSheet,Dimensions, Image,Button} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import {StylesConstant} from '../../../common/Constant';

const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

export default class IndividualItem extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {}

  shouldComponentUpdate(nextProps, nextState) {
    const current = this.props.item || {};
    const next = (nextProps && nextProps.item) || {};
    if (JSON.stringify(current) !== JSON.stringify(next)) {
      return true;
    }
    return false;
  }

  render() {
    const {item, handleCallback} = this.props;
    const {name, gender, idTypeLabel, idNumber, contactPhone} = item;
    const genderStr = gender===1?'男':'女'
    return (
      <TouchableOpacity
        style={styles.cell}
        onPress={() => {
          handleCallback && handleCallback();
        }}>
        <View>
          <View style={styles.listRowTitle}>
              <View style={{flex:1,flexDirection: 'row'}}>
                <Image source={require('../../../assets/images/item/icon_case.png')} style={{width: 20,height: 20,marginRight: 10}} />
                <Text style={{color: '#333333'}}>【{name}】{contactPhone}</Text>
              </View>
          </View>
          <View style={{padding:5,paddingTop: 10,paddingBottom: 10}}>
             {/* <View style={styles.listRow}>
                  <View style={styles.listRowLabel}>
                      <Image source={require('../../../assets/images/item/icon_user.png')} style={{width: 18,height: 18,marginRight: 5}} />
                      <Text style={{color: '#A8A8A9'}}>姓名：</Text>
                  </View>
                  <Text style={styles.listRowValue}>{name}</Text>
              </View>*/}
              <View style={styles.listRow}>
                  <View style={styles.listRowLabel}>
                      <Image source={require('../../../assets/images/item/icon_user.png')} style={{width: 18,height: 18,marginRight: 5}} />
                      <Text style={{color: '#A8A8A9'}}>性别：</Text>
                  </View>
                  <Text style={styles.listRowValue}>{genderStr}</Text>
              </View>
              <View style={styles.listRow}>
                  <View style={styles.listRowLabel}>
                      <Image source={require('../../../assets/images/item/icon_user.png')} style={{width: 18,height: 18,marginRight: 5}} />
                      <Text style={{color: '#A8A8A9'}}>证件类型：</Text>
                  </View>
                  <Text style={styles.listRowValue}>{idTypeLabel}</Text>
              </View>
              <View style={styles.listRow}>
                  <View style={styles.listRowLabel}>
                      <Image source={require('../../../assets/images/item/icon_user.png')} style={{width: 18,height: 18,marginRight: 5}} />
                      <Text style={{color: '#A8A8A9'}}>证件号码：</Text>
                  </View>
                  <Text style={styles.listRowValue}>{idNumber}</Text>
              </View>

              <View style={styles.flexBtn}>
                    <View style={styles.BtnWidth}>
                      <TouchableOpacity
                        style={styles.Btn}
                        onPress={() => {}}
                      >
                        <Text style={{color: '#4D70CC'}}>信用信息</Text>
                      </TouchableOpacity>
                    </View>
                    <View style={styles.BtnWidth}>
                        <TouchableOpacity
                          style={styles.Btn2}
                          onPress={() => {}}
                        >
                        <Text style={{color: '#704ECE'}}>行政审批记录</Text>
                      </TouchableOpacity>
                    </View>
                    <View style={styles.BtnWidth}>
                      <TouchableOpacity
                        style={styles.Btn3}
                        onPress={() => {}}
                      >
                        <Text style={{color: '#3CB7C2'}}>相关案件</Text>
                      </TouchableOpacity>
                    </View>
              </View>
          </View>

        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
    listRowTitle:{
        flexDirection: 'row',borderBottomWidth: 1,borderColor: '#ADADAD',
        padding: 5,paddingTop: 10,paddingBottom: 10,alignItems: 'center'
    },
    listRow:{
        flexDirection: 'row',justifyContent: 'flex-start',alignItems: 'flex-start',marginBottom: 5
    },
    listRowLabel: {
        width: 100,justifyContent: 'flex-start',flexDirection: 'row',alignItems: 'center'
    },
    listRowValue:{
        color: '#696969',width: screenWidth - 130
    },
    iconStatus: {
        width: 80,height: 20,
        marginTop: -10
    },
    cell: {
      backgroundColor: 'white',
      marginBottom: 10,
      marginLeft: 10,
      marginRight: 10,
      borderRadius: 7,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      shadowColor: '#e6e6e6',
      shadowOffset: {width: 4, height: 2},
      shadowOpacity: 0.8,
      shadowRadius: 2,
    },

    flexBtn:{
      display:'flex',
      flexDirection: 'row',
      justifyContent:'flex-end',
      borderTopColor:"#ADADAD",
      paddingTop:10,
      borderTopWidth:1
    },

    BtnWidth:{
      // marginLeft:2,
      marginRight:2
    },
    Btn:{
      flexDirection:"row",
      alignItems:"center",
      justifyContent:"center",
      height:36,
      // paddingTop:8,
      // paddingBottom:8,
      paddingLeft:4,
      paddingRight:4,
      borderColor:'#4D70CC', 
      backgroundColor:"#E1E7F6",
      borderRadius:3,
      borderBottomWidth:1,
      borderTopWidth:1,
      borderLeftWidth:1,
      borderRightWidth:1,
      overflow:'hidden'
    },
    Btn2:{
      flexDirection:"row",
      alignItems:"center",
      justifyContent:"center",
      height:36,
      // paddingTop:8,
      // paddingBottom:8,
      paddingLeft:4,
      paddingRight:4,
      borderColor:'#704ECE', 
      backgroundColor:"#E7E1F7",
      borderRadius:3,
      borderBottomWidth:1,
      borderTopWidth:1,
      borderLeftWidth:1,
      borderRightWidth:1,
      overflow:'hidden'
    },
    Btn3:{
      flexDirection:"row",
      alignItems:"center",
      justifyContent:"center",
      height:36,
      // paddingTop:8,
      // paddingBottom:8,
      paddingLeft:4,
      paddingRight:4,
      borderColor:'#3CB7C2', 
      backgroundColor:"#DEF3F5",
      borderRadius:3,
      borderBottomWidth:1,
      borderTopWidth:1,
      borderLeftWidth:1,
      borderRightWidth:1,
      overflow:'hidden'
    },
});
